<template>
  <div class="d-flex flex-column flex-root">
    <div
      class="login login-1 d-flex flex-column flex-lg-row flex-column-fluid bg-white login-signin-on"
      id="kt_login"
    >
      <!--begin::Aside-->
      <div
        class="login-aside d-flex flex-column flex-row-auto"
        style="background: linear-gradient(to right, #68dde0, #c9f7f5)"
      >
        <div class="d-flex flex-column-auto flex-column pt-lg-40 pt-15">
          <a href="#" class="text-center mb-10">
            <img src="media/logos/Letoy_logo.png" class="max-h-120px" alt="" />
          </a>
          <h3
            class="font-weight-bolder text-center font-size-h4 font-size-h1-lg"
            style="color: #3078c7"
          >
            国内优质在线学习平台<br />
            由乐游工作室提供多门免费课程
          </h3>
        </div>
        <div
          class="aside-img d-flex flex-row-fluid bgi-no-repeat bgi-position-y-bottom bgi-position-x-center"
          style="
            background-image: url('/media/svg/illustrations/background.svg');
          "
        ></div>
      </div>
      <!--begin::Aside-->
      <!--begin::Content-->
      <div
        class="login-content flex-row-fluid d-flex flex-column justify-content-center position-relative overflow-hidden p-7 mx-auto"
      >
        <div class="d-flex flex-column-fluid flex-center">
          <!--begin::Signin-->
          <div class="login-form login-signin">
            <div class="pb-13 pt-lg-0 pt-5">
              <h3
                class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg"
              >
                创建一个新的账户
              </h3>
            </div>
            <div class="form-group">
              <div class="d-flex justify-content-between mt-n5">
                <label class="font-size-h6 font-weight-bolder text-dark pt-5"
                  >邮箱</label
                >
              </div>
              <div
                id="example-input-group-2"
                label=""
                label-for="example-input-2"
              >
                <input
                  class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                  type="email"
                  name="email"
                  placeholder="请输入可用邮箱"
                  v-model="email"
                  @change="checkEmail"
                />
                <div class="warning">{{ errorEmail }}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="d-flex justify-content-between mt-n5">
                <label class="font-size-h6 font-weight-bolder text-dark pt-5"
                  >密码</label
                >
              </div>
              <div
                id="example-input-group-2"
                label=""
                label-for="example-input-2"
              >
                <input
                  class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                  type="password"
                  name="password"
                  placeholder="请输入密码"
                  v-model="password"
                  autocomplete="off"
                  @change="checkPwd"
                />
                <div class="warning">{{ errorPwd }}</div>
              </div>
            </div>
            <div class="form-group">
              <div class="d-flex justify-content-between mt-n5">
                <label class="font-size-h6 font-weight-bolder text-dark pt-5"
                  >确认密码</label
                >
              </div>
              <div
                id="example-input-group-2"
                label=""
                label-for="example-input-2"
              >
                <input
                  class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
                  type="password"
                  name="rePassword"
                  placeholder="请再次输入您的密码"
                  v-model="rePassword"
                  autocomplete="off"
                  @change="checkRePwd"
                />
                <div class="warning">{{ errorRePwd }}</div>
              </div>
            </div>
            <div class="pb-lg-0 pb-5">
              <button
                class="btn btn-primary font-weight-bolder font-size-h6 px-15 py-4 my-3 mr-3"
                @click="handleClick()"
              >
                提 交
              </button>
              <button
                class="btn btn-primary font-weight-bolder font-size-h6 px-15 py-4 my-3 mr-3"
                style="background-color:grue"
                @click="returnClick()"
              >
                取 消
              </button>
            </div>
          </div>
          <!--end::Signin-->
        </div>
        <!--begin::Content footer-->
        <div
          class="d-flex justify-content-lg-start justify-content-center align-items-end py-7 py-lg-0"
        >
          <a
            href="https://letoy.site"
            target="_blank"
            class="text-primary font-weight-bolder font-size-h5"
            >©{{ year }} 乐游工作室</a
          >
          <a
            href="https://letoy.site"
            target="_blank"
            class="text-primary ml-10 font-weight-bolder font-size-h5"
            >关于</a
          >
          <a
            href="https://letoy.site"
            target="_blank"
            class="text-primary ml-10 font-weight-bolder font-size-h5"
            >联系我们</a
          >
        </div>
        <!--end::Content footer-->
      </div>
      <!--end::Content-->
    </div>
  </div>
</template>

<!-- Load login custom page styles -->
<style lang="scss">
@import "@/assets/sass/pages/login/login-1.scss";
.warning {
  margin-top: 3px;
  font-size: 13px;
  color: #fb6868;
  height: 5px;
}
</style>

<script>

export default {
  name: "login-1",
  data() {
    return {
      errorEmail: "",
      errorPwd: "",
      errorRePwd: "",
      year: new Date().getFullYear(),
      email: "",
      password: "",
      rePassword: "",
    };
  },
  mounted() {},
  methods: {
    returnClick() {
      this.$router.push("/login");
    },
    handleClick() {
      this.$router.push("/dashboard");
    },
    checkEmail() {
      let rule = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      let text = "";
      if (!rule.test(this.email)) {
        text = "邮箱格式输入有误";
      }
      this.errorEmail = text;
    },
    checkPwd() {
      let rule = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
      let text = "";
      if (!rule.test(this.password)) {
        text = "最少六位，需要英文字母大小写、数字和特殊字符";
      }
      this.errorPwd = text;
    },
    checkRePwd() {
      let text = "";
      if (this.password != this.rePassword) {
        text = "密码不一致";
      }
      this.errorRePwd = text;
    },
    login() {
      this.$axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        url: "/api/preRegisterUser",
        method: "post",
        params: {
          email: "",
          password: "",
        },
      })
        .then((response) => {
          console.log(response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
